<template>
	<view class="apply-pages">
		<view class="apply-info">
			<view class="item">
				<view class="label">真实姓名</view>
				<view class="info-right"><input type="text" value="" data-key="realName"  placeholder-class="placeholder"  v-model='init.realName'  @input="bindInputChange" placeholder="请填写真实姓名" /></view>
			</view>
			<view class="item">
				<view class="label">当前年龄</view>
				<view class="info-right"><input type="number" maxlength="2" value=""  data-key="age"  placeholder-class="placeholder"  v-model='init.age'  @input="bindInputChange" placeholder="请填写您当前年龄" /></view>
			</view>
			<view class="item">
				<view class="label">职身份业</view>
				<view class="info-right">
					<picker mode="selector" @change="bindPickerChange" data-key="job" :value="init.job.array.index" :range="init.job.array">
						<view class="picker-view">
							<view class="pick-text">{{init.job.array[init.job.index]}}</view>
							<view><image class="arrow" src="../static/images/icon_arrow_right.png" mode=""></image></view>
						</view>
					</picker>
				</view>
			</view>
			<view class="item">
				<view class="label">工资发放形式</view>
				<view class="info-right">
					<picker mode="selector" @change="bindPickerChange" data-key="salaryStatus" :value="init.salaryStatus.index" :range="init.salaryStatus.array">
						<view class="picker-view">
							<view class="pick-text">{{init.salaryStatus.array[init.salaryStatus.index] }}</view>
							<view><image class="arrow" src="../static/images/icon_arrow_right.png" mode=""></image></view>
						</view>
					</picker>
				</view>
			</view>
			<view class="item">
				<view class="label">现金收入/月</view>
				<view class="info-right">
					<view class="picker-view">
						<view class="pick-text"><input type="text" data-key="salary"   v-model='init.salary'  @input="bindInputChange" value="" placeholder-class="placeholder" /></view>
						<view>元</view>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="label" style="width: 400upx;">能提供连续几个月流水</view>
				<view class="info-right">
					<picker mode="selector" @change="bindPickerChange" data-key="salaryStream" :value="init.salaryStream.index" :range="init.salaryStream.array">
						<view class="picker-view" style="width: 380upx;">
							<view class="pick-text">{{init.salaryStream.array[init.salaryStream.index]}}</view>
							<view><image class="arrow" src="../static/images/icon_arrow_right.png" mode=""></image></view>
						</view>
					</picker>
				</view>
			</view>
			<view class="item">
				<view class="label">当前工作年龄</view>
				<view class="info-right">
					<picker mode="selector" @change="bindPickerChange" data-key="workAge"  :value="init.workAge.index" :range="init.workAge.array">
						<view class="picker-view">
							<view class="pick-text">{{init.workAge.array[init.workAge.index] }}</view>
							<view><image class="arrow" src="../static/images/icon_arrow_right.png" mode=""></image></view>
						</view>
					</picker>
				</view>
			</view>
			<view class="item">
				<view class="label">就职公司类型</view>
				<view class="info-right">
					<picker mode="selector" @change="bindPickerChange" data-key="companyType"  :value="init.companyType.index" :range="init.companyType.array">
						<view class="picker-view">
							<view class="pick-text">{{init.companyType.array[init.companyType.index] }}</view>
							<view><image class="arrow" src="../static/images/icon_arrow_right.png" mode=""></image></view>
						</view>
					</picker>
				</view>
			</view>
		</view>
		<view class="apply-info">
			<view class="item">
				<view class="label">是否有本地公积金</view>
				<view class="info-right">
					<picker mode="selector" @change="bindPickerChange" data-key="ifProvidentFund" :value="init.ifProvidentFund.index" :range="init.ifProvidentFund.array">
						<view class="picker-view">
							<view class="pick-text">{{init.ifProvidentFund.array[init.ifProvidentFund.index] }}</view>
							<view><image class="arrow" src="../static/images/icon_arrow_right.png" mode=""></image></view>
						</view>
					</picker>
				</view>
			</view>
			<view class="item">
				<view class="label">是否有本地社保</view>
				<view class="info-right">
					<picker mode="selector" @change="bindPickerChange" data-key="ifSocialSecurity" :value="init.ifSocialSecurity.index" :range="init.ifSocialSecurity.array">
						<view class="picker-view">
							<view class="pick-text">{{init.ifSocialSecurity.array[init.ifSocialSecurity.index] }}</view>
							<view><image class="arrow" src="../static/images/icon_arrow_right.png" mode=""></image></view>
						</view>
					</picker>
				</view>
			</view>
			<view class="item">
				<view class="label" style="width: 430upx;">本地社保连续缴存时间</view>
				<view class="info-right">
					<view class="picker-view">
						<view class="pick-text"><input type="text"  data-key="socialSecurityTime"  v-model='init.socialSecurityTime'  @input="bindInputChange" value="" placeholder-class="placeholder" /></view>
						<view>月</view>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="label">名下房产类型</view>
				<view class="info-right">
					<picker mode="selector" @change="bindPickerChange" data-key="estateType" :value="init.estateType.index" :range="init.estateType.array">
						<view class="picker-view">
							<view class="pick-text">{{init.estateType.array[init.estateType.index] }}</view>
							<view><image class="arrow" src="../static/images/icon_arrow_right.png" mode=""></image></view>
						</view>
					</picker>
				</view>
			</view>
			<view class="item">
				<view class="label">名下是否有车</view>
				<view class="info-right">
					<picker mode="selector" @change="bindPickerChange" data-key="ifCar" :value="init.ifCar.index" :range="init.ifCar.array">
						<view class="picker-view">
							<view class="pick-text">{{init.ifCar.array[init.ifCar.index] }}</view>
							<view><image class="arrow" src="../static/images/icon_arrow_right.png" mode=""></image></view>
						</view>
					</picker>
				</view>
			</view>
		</view>
		<view class="telephone apply-info">
			<view class="item">
				<view class="label">手机号</view>
				<view class="info-right"><input type="number"  disabled v-model="init.mobile" placeholder-class="placeholder" placeholder="请输入手机号" /></view>
			</view>
			<!-- <view class="item">
				<view class="info-right"><input type="text" value="" placeholder-class="placeholder" placeholder="请输入手机验证码" /></view>
				<view class="label phone-btn">获取验证码</view>
			</view> -->
		</view>
		<view class="radio-text">
			<radio-group >
				<radio class="radio" @click="radioChange" :checked="checked"  color="#236af6"/>
			</radio-group>
			<view class="text">我已同意平台</view>
			<view class="agreement" @click="navigateUrl">《用户服务协议》</view>
		</view>
		<view class="sure-btn" @click="loanApply">提交</view>
	</view>
</template>
<script>
import Vue from "vue"
import InterServer from "@/common/config/server"
import {
  localStorageSyncServer,
  camelCase,
  bytesNumber
} from "@/common/js/common"
export default {
	data() {
		return {
			checked: false,
			init:{
			   realName:"",
			   age:"",
               job:{
				   array: ['上班族', '企业主', '个体户', '无固定置业'],
				   index:0
			   },
			   salaryStatus:{  //工资发放形式
					array: ['银行卡发放', '现金发放'],
					index:0
			   },
			   salary:"",  //现金收入
			   salaryStream:{  //提供几个月流水
					array: ['3个月以下', '3个月（含）-6个月','6个月（含）以上'],
					index:0
			   },
			   workAge:{
					array: ['不足3个月', '3-5个月','6-11个月','1-3年','3年以上'],
					index:0
			   },
			   companyType:{
					array: ['公务员/事业单位员工', '国企单位员工','世界500强企业员工','上市企业员工','普通企业员工'],
					index:0
			   },
			   ifProvidentFund:{  //是否有公积金
					array: ['是，有本地公积金', '否，不缴纳'],
					index:0
			   },
			   ifSocialSecurity:{  //是否有社保
					array: ['是，有本地社保', '否，不缴纳'],
					index:0
			   },
			   socialSecurityTime:"",
			   estateType:{  //名下房产
				   array: ['无房产', '小产权房','经适/限价房','房改/危改房','商铺','厂房','商住两用房','办公楼','商品住宅','宅基地/自建房'],
				   index:0
			   },
			   ifCar:{  //名下是否有车
					array: ['无车', '名下有车'],
					 index:0
			   },
			   mobile:localStorageSyncServer.get("mobile", 1)
			},
		};
	},
	onLoad(options){
		if(options.id){
			this.id=options.id 
		}
	},
	onShow(){
		// #ifdef H5
				document.title=`立即申请`
		// #endif
			},
	methods: {
		//picker改变
		bindPickerChange(e) {
			let [key,index]=[e.currentTarget.dataset.key,e.target.value]
			this.init[key].index=index;
			console.log(this.init)
		},
		//input输入
		bindInputChange(e){
			let [key,value]=[e.currentTarget.dataset.key,e.target.value]
			this.init[key]=value
			console.log(this.init)

		},
		//贷款申请
		loanApply(){
			let init=this.init
			if(init.realName==""){
				Vue.showCustomToast("请输入姓名")
				return false
			}
			if(init.age==""){
				Vue.showCustomToast("请输入当前年龄")
                return false
			}
			if(init.salary==""){
				Vue.showCustomToast("请输入现金收入")
                return false
			}
			if(init.socialSecurityTime==""){
				Vue.showCustomToast("请输入本地社保连续缴存时间")
                return false
			}
			if(!this.checked){ 
				Vue.showCustomToast("请同意平台顾问入驻协议")
				return false
			}
			InterServer.loanApply({
			   loanId:Number(this.id),
			   realName:init.realName,
			   age:Number(init.age),
         job:init.job.array[init.job.index],
			   salaryStatus:init.salaryStatus.array[init.salaryStatus.index],
			   salary:Number(init.salary),  //现金收入
			   salaryStream:init.salaryStream.array[init.salaryStream.index],
			   workAge:init.workAge.array[init.workAge.index],
			   companyType:init.companyType.array[init.companyType.index],
			   ifProvidentFund:init.ifProvidentFund.index==0?true:false,
			   ifSocialSecurity:init.ifSocialSecurity.index==0?true:false,
			   socialSecurityTime:init.socialSecurityTime,
			   estateType:init.estateType.array[init.estateType.index],
			   ifCar:init.ifCar.index==0?true:false,
			   mobile:init.mobile,
			}).then(res=>{
				console.log(res)
				if(res.code==200){
             Vue.customNavigateTo('./success?type=apply')
				} 
			}).catch(function (err) {
				console.log(err);
			  })

		},
		//radio选取
		radioChange(e){
			this.checked=!this.checked
		},
		//页面跳转
		navigateUrl(e){
			Vue.customNavigateTo('./userAgreement');
		},
	}
};
</script>
<style lang="less" scoped>
.apply-pages {
	.apply-info {
		padding: 0 30upx;
		background: #ffffff;
		margin-bottom: 18upx;
		.item {
			display: flex;
			height: 87upx;
			line-height: 87upx;
			font-size: 30upx;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: #000000;
			align-items: center;
			text-align: right;
			border-bottom: 1upx solid #ededed;
			.label {
				width: 400upx;
				text-align: left;
			}
			.info-right {
				width: 380upx;
			}
			.placeholder {
				font-weight: 400;
				color: #999999;
			}
			input {
				height: 87upx;
				line-height: 87upx;
				color: #1b65fa;
			}
			.picker-view {
				display: flex;
				.pick-text {
					width: 450upx;
					color: #1b65fa;
					margin-right: 20upx;
				}
				.arrow {
					width: 12upx;
					height: 21upx;
				}
			}
		}
	}
	.telephone {
		.item {
			text-align: left;
			.label {
				width: 120upx;
			}
			.info-right {
				width: 600upx;
			}
			.phone-btn {
				width: 180upx;
				height: 64upx;
				background: rgba(27, 101, 250, 1);
				border-radius: 6upx;
				text-align: center;
				line-height: 64upx;
				font-size: 26upx;
				font-family: PingFangSC-Medium;
				font-weight: 500;
				color: #ffffff;
			}
		}
	}
	.radio-text{
		display: flex;
		color: #999999;
		font-size: 26upx;
		align-items: center;
		padding: 0upx 30upx 85upx;
		.text{
			margin-left: 10upx;
		}
		.radio{
		 	transform:scale(0.8);
		}
	.agreement{
			color: #236af6;
			font-weight:500;
		}
	}
	.sure-btn{
		background: #236af6;
		color: #ffffff;
		height: 100upx;
		line-height: 100upx;
		text-align: center;
		font-size: 30upx;
	}
}
</style>
